<template>
<div v-if="value" class="source-wapper">
   <el-dialog
    title="素材选择"
    :visible.sync="value"
    width="50%"
    top="30px"
    :modal-append-to-body="false"
    :before-close="handleClose"
    custom-class='source-alert'
    >
      <div class="dictory-wapper" :style="{height:winHeight+'px'}">
        <div class="btn-box">
          <div class="search">
            <el-input clearable placeholder="请输入名称" v-model="searchVal" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="clickSearch"></el-button>
            </el-input>
          </div>
        </div>
        <div class="bread-box" v-if="breadList.length > 1">
          <div class="breadcrumb">
            <template v-for="(item,idx) in breadList">
                <div class="breadcrumb-item" v-show="idx == 0" @click="gotoBack(item,idx)">{{item.tit}}</div>
                <div class="breadcrumb-item" v-show="idx > 0 && idx < breadList.length-1"  @click="gotoBack(item,idx)"><span class="speter">>></span>{{item.tit}}</div>
                <div class="breadcrumb-item" v-show="idx == breadList.length-1"><span class="speter">>></span>{{item.tit}}</div>
            </template>
          </div>
        </div>
        <div class="list-box">
          <div class="list" v-for="(item,idx) in dataList" :key="idx">
            <div class="left">
              <div class="item">
                <img title="文件夹" @click="gotoChild(item)" v-if="item.type == 1" src="/img/filebox.png" alt="">
                <img title="资源" v-if="item.type == 2" src="/img/article.png" alt="资源">
                <img @click="gotoChild(item)" title="资源组"  v-if="item.type == 4" src="/img/filegroup.png" alt="资源组">
              </div>
              <div class="descri-box">
                <div class="tit">{{item.name}}</div>
                <div class="mark" >
                  <div class="des" v-if="item.type == 1">文件夹</div>
                  <div class="des" v-if="item.type == 2">素材</div>
                  <div class="des" v-if="item.type == 4">素材组</div>
                  <div class="des">{{item.mark || '暂无描述'}}</div>
                  <div class="genxi-box">{{item.time}}</div>
                </div>
              </div>
            </div>
            <div class="right" @change="change($event,item)">
               <el-checkbox  v-if="item.type == 4" v-model="item.checked"></el-checkbox>
            </div>
          </div>
          <el-empty v-if="dataList.length==0" :image-size="100"></el-empty>
        </div>
        <div class="pagination-box">
          <el-pagination
              background
              hide-on-single-page
              layout="prev, pager, next, total"
              :total="total"
              :page-size="size"
              :current-page="page"
              @current-change="currentChange"
          >
            </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadSubmit()">确 定</el-button>
      </span>
  </el-dialog>
</div>
</template>
<script>
  import {
   getList
  } from "@/api/resource/depart";
  import {mapGetters} from "vuex";
  export default {
    props:{
      value:{
        type:Boolean,
        default:true
      },
      selectArr:{
        type:Array,
        default:[]
      }
    },
    data() {
      return {
        dataList:[],
        page:1,
        size:10,
        total:0,
        searchVal:'',
        pid:0,
        breadList:[{tit:'根目录',pid:0}],
        configLoading:false,
        currentRow:{},
        ruleForm: {
          name: '',
          mark:''
        },
        rules: {
          name: [
            { required: true, message: '请输入文件夹名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          mark: [
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ]
        },
        checkedArr:[]
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
      userId() {
        return this.userInfo.user_id;
      },
      winHeight(){
        return window.innerHeight - 240
      }
    },
    mounted(){
      this.getListData()
      // this.checkedArr = [...this.checkedArr,...this.selectArr]
      this.checkedArr = this.selectArr
     console.log('~~~~~~~~~~~~this.checkedArr~~~~~~~~~~~~~~~~',this.checkedArr)
    },
    methods: {
     async getListData(){
       const res = await getList(this.page,this.size,{searchVal:this.searchVal,pid:this.pid});
       const dealData = res.data.data.list.map(item => {
         return {...item,checked :false};
       })
       const defaultArr = [...this.selectArr]
       defaultArr.forEach(item=>{
          dealData.forEach(citem=>{
             if(item.id == citem.id && !citem.checked && item.type != 1){
               citem.checked = true;
             }
          })
       })
       this.dataList = dealData || []
       this.total = res.data.data.total
       this.page = res.data.data.page
     },
     currentChange(page){
        this.page = page
        this.getListData()
     },
     clickSearch(){
       this.getListData()
     },
     gotoChild(item){
       this.page = 1
       this.dataList = []
       this.breadList.push({tit:item.name,pid:item.id})
       this.pid = item.id
       this.getListData()
     },
     gotoBack(item,idx){
       if(idx == 0){
         this.breadList = [{tit:'根目录',pid:0}]
       }else{
           const newArr = this.breadList.slice(0,idx+1)
           this.breadList = newArr
       }
       this.pid = item.pid
       this.getListData()
     },
     handleClose(){
       this.$emit("input",false)
     },
     change(e,item){
       if(e){
          this.checkedArr=[{id:item.id,url:item.url,type:item.type,name:item.name}]
                console.log('~~~~~~~~~~~~~this.checkedArr~~~~~~~~~~~~',this.checkedArr)
       }else{
         this.checkedArr = this.checkedArr.reduce((newArr,cur)=>{
            if(cur.id != item.id){
              newArr=[{id:cur.id,url:cur.url,type:cur.type,name:cur.name}]
            }
            return newArr
         },[])
       }
     },
     uploadSubmit(){
       this.$emit("selChange",this.checkedArr)
     }
    }
  };
</script>

<style lang='scss' scoped>
:deep(.el-dialog__body){
  padding: 10px 20px;
}
.source-wapper{
  position: relative;
  z-index: 1000000000;
  .el-dialog__wrapper{
      z-index: 10000!important;
  }
}
.video-icon{
  position: absolute;
  left: 0;
  top: 0;
}
.bread-box{
  .speter{
    margin: 0 6px;
  }
  .breadcrumb{
    display: flex;
    align-items: flex-end;
    .breadcrumb-item{
      font-size: 14px;
      color: #bfbfbf;
      cursor: pointer;
      user-select: none;
      &:last-child{
        cursor: default;
        color: #333;
      }
    }
  }
}
.dictory-wapper{
  display: flex;
  flex-direction: column;
  min-height: 200px;
  .btn-box{
    padding-bottom: 18px;
    display: flex;
    justify-content: space-between;
    .search{
      width: 40%;
    }
  }
  .list-box{
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #ddd;
    flex: 1;
    .list{
      display: flex;
      padding: 10px 20px 10px 20px;
      border-bottom: 1px solid #ddd;
      border-top: none;
      cursor: pointer;
      user-select: none;
      justify-content: space-between;
      .left{
        display: flex;
      }
      .right{
        height: 100%;
        display: flex;
        align-items: center;
        margin-top: 10px;
      }
      &:last-child{
          border-bottom: none;
      }
      .item{
        margin-right: 20px;
        img{
          width: 50px;
          margin-top: 10px;
        }
      }
      .descri-box{
        .tit{
          font-size: 16px;
          color: #333;
          padding-top: 10px;
          margin-bottom: 10px;
        }
        .mark{
          display: flex;
          align-items: flex-end;
          .des{
              font-size: 14px;
              margin-right: 16px;
              color: #bfbfbf;
          }
          .genxi-box{
              font-size: 14px;
              margin-right: 16px;
              color: #bfbfbf;
          }
        }
      }
    }
  }
  .pagination-box{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }
  .bread-box{
    margin-bottom: 18px;
  }
}
</style>
